 <template>
       <div>
         <!-- 搜索结果页-头部导航 -->
         <div class="search-result-container">
           <!-- 点击实现后退效果 -->
           <van-nav-bar
             title="搜索结果"
             left-arrow
             @click-left="$router.go(-1)"
             fixed
           />
         </div>
         <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
         >
          <artilitem v-for="(item) in list" :key="item.art_id" :item="item"
            :isshow='false'  @click.native="tiaozhuan(item.art_id)"></artilitem>
        </van-list>
          <div v-if="isshow">暂无搜索结果</div>
       </div>
</template>
<script>
import {searchruest} from '@/api/index.js'
import artilitem from '@/components/artilitem.vue'
export default{
  name:'searchresult',
  data(){
    return{
     list:[], //搜索文章的数组
     page:1,  //页码数
     isshow:false, //暂无搜索结果的状态
     loading:false,//加载状态
     finished:false,  //是否全部加载完成
    }
  },
 async mounted(){
     const req=await searchruest({page:this.page,per_page:10,q:this.$route.query.key})
       this.list=req.data.data.results
       if(this.list.length==0){
         this.isshow=true
       }
  },
  components:{
    artilitem
  },
  methods:{
   async onLoad(){
     if(this.list.length>0){  //代表当前list有数据再进行发送请求
         this.page++
         const req=await searchruest({page:this.page,per_page:10,q:this.$route.query.key})
         if(req.data.data.results.length==0){ //通过判断当前数组长度来判断下一页有没有数据
           this.finished=true  //没有更多数据了
           return
         }
         this.list=[...this.list,...req.data.data.results]  //合并数据
         this.loading=false //并且将加载状态改成false
     }
    },
     tiaozhuan(id){ //文章跳转详情页点击事件
          this.$router.push({
            path:`/articledetail?id=${id}`,
          })
      }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
     padding-top: 46px;
   }
</style>